<template>
    <div class="albumDetailPage">
        <div class="album_header">
            <div class="header_bg">
                <p class="time">{{albumList.create_time | time }}</p>
                <p class="title">{{albumList.title}}</p>
                <img :src=albumList.head_photo alt="">
            </div>
            <div class="header_info">
                <p class="name">{{albumList.username}}</p>
                <p class="source">{{albumList.org_name}}</p>
                <p class="introduce">{{albumList.describe}}</p>
            </div>
        </div>
        <div class="album" :class="{'shareComponnet':shareIos}">
            <mu-grid-list class="gridlist-inline-demo" :cols="1.2"  >
                <mu-grid-tile v-for="(item, index) in photoList" :key="index">
                    <div class="box_img">
                        <img :src="item.photo_address" alt onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'"/>
                    </div>
                </mu-grid-tile>
            </mu-grid-list>
            <div class="icon-box">
                <!--<div class="collection">-->
                    <!--<i class="iconfont iconxuanchuan_icon_dianzan icon_right"-->
                       <!--:class="albumList.is_collection_id?'follow_active':''"></i>-->
                <!--</div>-->

                <div class="collection" v-if="!albumList.is_collection_id" @click="isCollection">
                    <img src="@as/img/store.png" alt="">收藏
                </div>
                <div class="collection shouc" v-if="albumList.is_collection_id==1" @click="cancelCollection">
                    <img src="@as/img/store_active2.png" alt="">已收藏
                </div>

                <div class="praise" @click="is_head">
                  <span v-if="albumList.like_id==0"><img  src="@as/img/xuanchuan_shoucangqian.png" alt="">点赞</span>
                  <span v-if="albumList.like_id==1"><img  src="@as/img/xuanchuan_shoucanghou_set.png" alt="">已点赞</span>
                </div>
            </div>
        </div>
        <share :shareData="shareData"  v-if="shareIos"  :bgColor="bgColor" />
    </div>
</template>
<script>
    import Swiper from "swiper";
    import share from '@/views/home/components/share.vue';
    export default {
        data() {
            return {
                albumId: '',//相册id
                albumList:{},
                photoList: [],
                collectionId: false,//收藏
                isHead: '',//点赞
                collection_id: '',
                like_id:"",
                shareData:[],
                bgColor:{
                    swiperColor:'#fff',
                    codeColor:'#F5F5F5'
                },
                shareIos:false,
                isAndroid:false,
                orgnation_id:'',
                isIOS:false,
            }
        },
        created() {
            if(this.$route.query.fromIos){
                this.albumId = this.$route.query.id
                this.shareIos =true;
                this.orgnation_id =this.$route.query.orgnation_id
            }else{
                this.albumId = this.$route.query.id
            }

        },
        mounted() {
            this.$progress.done();
            this.getAlbumDetails();
            var u = navigator.userAgent, app = navigator.appVersion;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
            var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            if (isAndroid) {
                //这个是安卓操作系统
                this.isAndroid =true;
                this.isIos =false;
                if(this.shareIos){
                    this.getAdShare(6)
                }
            }
            if (isIOS) {
                this.isAndroid =false;
                this.isIos =true;
                if(this.shareIos){
                    this.getAdShare(5)
                }
            }
            new Swiper(".swiper-container", {
                slidesPerView: 2,
            });

        },
        components:{
            share,
        },
        methods: {
            /*
            * 获取相册内容
            * */
            getAlbumDetails() {
                this.$http.get("app/NewCustom/photo_info", {
                    id: this.albumId,
                    uid: Cookies.get("user_71ydj")?JSON.parse(Cookies.get("user_71ydj")).id:'',
                })
                .then(res => {
                    if(res.code==200){
                        this.albumList = res.data;
                        this.photoList=res.data.photo;
                        if(res.data.collection_id){
                            this.collection_id =res.data.collection_id;
                        };
                    }
                })
            },
            /*
            * 相册点赞取消
            * */
            is_head() {
                if(!Cookies.get("user_71ydj")){
                    this.$router.push({
                        path:'/mine'
                    })
                    return false
                }
                this.$http
                    .post("/app/NewCustom/album_like", {
                        id: this.albumId,
                        uid: JSON.parse(Cookies.get("user_71ydj")).id
                    })
                    .then(res => {
                        if(res.code==200){
                            this.albumList.like_id =!this.albumList.like_id
                        }
                    });
            },
            /*收藏*/
            isCollection() {
                if(!Cookies.get("user_71ydj")){
                    this.$router.push({
                        path:'/mine'
                    })
                    return false
                }
                this.$http
                    .post("app/NewCustom/collection", {
                        uid: JSON.parse(Cookies.get("user_71ydj")).id,
                        id: this.albumList.id,
                        type: 2,
                        resources_type: 2,
                    })
                    .then(res => {
                        console.log(res)
                        if(res.code==200){
                            this.albumList.is_collection_id=1;
                            this.collection_id =res.data.collection_id;
                        }else{
                            //收藏失败
                        }

                    });
            },
            /*取消收藏*/
            cancelCollection(){
                if(!Cookies.get("user_71ydj")){
                    this.$router.push({
                        path:'/mine'
                    })
                    return false
                }
                this.$http
                    .post("app/NewCustom/cancel_collection", {
                        collection_id:this.collection_id,
                    })
                    .then(res => {
                        this.albumList.is_collection_id =0;
                    });
            },
            getAdShare(id){
                this.$http
                    .get("app/My/add_list", {
                        org_id: this.orgnation_id,
                        position: id,
                    })
                    .then(res => {
                        if(res.code==200){
                            if(res.data.length>0){
                                this.shareData =res.data;
                            }else{
                                this.shareData=[
                                    {
                                        photo:'https://media.71ydj.com/17cd567662bafc8d63d73d41444585d2.jpg',
                                        link:'https://apps.apple.com/cn/app/id1434639733',
                                        remarks:'中纺机党建云',
                                    }
                                ]
                            }
                        }
                    })
            },

        },
    }
</script>

<style scoped>
    .album_header {

    }
    .mu-grid-tile .mu-grid-tile-titlebar{
        display: none!important;
    }

    .album_header .header_bg {
        width: 375px;
        height: 148px;
        /*background: linear-gradient(180deg, rgba(235, 77, 68, 1) 0%, rgba(244, 117, 72, 1) 100%);*/
        position: relative;
        background-image:url("../../../../assets/img/xuanchuan_xiangcexiangqing_bg_pic@2x.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        /*xuanchuan_xiangcexiangqing_bg_pic@2x.png*/

    }

    .header_bg .time {
        font-size: 12px;
        color: #fff;
        line-height: 24px;
        margin: 0 0 0 16px;
        padding-top: 49px;
    }

    .header_bg .title {
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        line-height: 22px;
        margin-left: 16px;
    }

    .header_bg img {
        width: 70px;
        height: 70px;
        position: absolute;
        right: 10px;
        bottom: -10px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
    }

    .header_info {
        width: 343px;
        margin: 0 16px;
    }

    .header_info .name {
        font-size: 14px;
        font-weight: bold;
        color: #333333;
    }

    .header_info .source {
        font-size: 12px;
        color: #999999;
    }

    .header_info .introduce {
        font-size: 12px;
        color: #666666;
        line-height: 26px;
        margin-top: 25px;
        text-overflow: wrap;
        word-wrap:break-word
    }

    /*banner*/
    .gridlist-inline-demo {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .album {
        width: 359px;
        margin-left: 16px;
        overflow: hidden;
        margin-top: 47px;
    }
    .album.shareComponnet{
        padding-bottom: 360px;
    }
    .album .box_img {
        /*width: 290px;*/
        height: 218px;
        border-radius: 8px;
        float: left;

    }

    .album .box_img img {
        height: 100%;
        width: 100%;
        border-radius: 4px;
        -webkit-border-radius: 4px;
    }


    .icon-box {
        width: 325px;
        height: 50px;
    }

    .icon-box div {
        float: right;
        font-size: 12px;
        line-height: 24px;
        color: #666666;
        margin-left: 16px;
        margin-top: 26px;
    }

    .icon-box div img {
        width: 18px;
        height: 100%;
        margin-right: 5px;
        position: relative;
        top: 2px;
    }

    .albumDetailPage /deep/.mu-grid-tile-titlebar{
        opacity: 0;
        display: none;
    }
    .albumDetailPage /deep/ .mu-grid-tile-wrapper{
        margin-right: 13px;
    }
    .albumDetailPage /deep/  .mu-grid-tile{
        border-radius: 4px;
        -webkit-border-radius: 4px;
    }
</style>